// ref: https://github.com/primer/primer/blob/master/modules/primer-tooltips/lib/tooltips.scss
.tooltipped
  position: relative

// This is the tooltip bubble
.tooltipped::after
  position: absolute
  z-index: 1000000
  display: none
  padding: .2em .5em
  border-radius: 3px
  background: var(--color-text)
  color: var(--color-background)
  content: attr(aria-label)
  text-align: center
  white-space: pre
  word-wrap: break-word
  font-weight: 400
  font-size: $font-size * .8
  font-family: $font-family-body
  line-height: $line-height
  opacity: 0
  -webkit-font-smoothing: subpixel-antialiased
  font-display: swap // @stylint ignore
  text-rendering: geometricPrecision

// This is the tooltip arrow
.tooltipped::before
  position: absolute
  z-index: 1000001
  display: none
  width: 0
  height: 0
  border: 6px solid transparent
  color: var(--color-text)
  content: ""
  opacity: 0
  pointer-events: none

// delay animation for tooltip
@keyframes tooltip-appear
  from
    opacity: 0

  to
    opacity: 1

// This will indicate when we'll activate the tooltip
.tooltipped:hover, .tooltipped:active, .tooltipped:focus
  &::before, &::after
    display: inline-block
    text-decoration: none
    animation-name: tooltip-appear
    animation-duration: .1s
    animation-timing-function: ease-in
    animation-fill-mode: forwards

// Tooltipped south
.tooltipped-s, .tooltipped-sw
  &::after
    top: 100%
    right: 50%
    margin-top: 6px

  &::before
    top: auto
    right: 50%
    bottom: -7px
    margin-right: -6px
    border-bottom-color: var(--color-text)

.tooltipped-sw::after
  margin-right: -16px

// Move the tooltip body to the center of the object.
.tooltipped-s::after
  transform: translateX(50%)